<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历分析</title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
    <h1>简历分析</h1>
    <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="resume" accept=".pdf,.docx" required />
        <button type="submit">上传</button>
    </form>
    <h3>分析结果</h3>
    <div id="analyze_result" style="padding:30px"></div>
    <script>
        function scrollToBottom() {
            window.scrollTo(0, document.body.scrollHeight);
        }
        let uploadForm = document.getElementById("uploadForm");
        let analyze_result = document.getElementById("analyze_result");
        uploadForm.onsubmit = async function(e) {
            e.preventDefault();
            let formData = new FormData(this);
            let response = await fetch("analyze/stream", {
                method: "POST",
                body: formData
            });
            // 获取响应体的读取器
            const reader = response.body.getReader();
            // 创建一个文本解码器
            const decoder = new TextDecoder();
            // 存储每个职位分析内容的映射对象
            let jobMap = {};
            //当前正在处理的职位的ID
            let currentJobId = null;
            //当前正在处理的职位ID的元素
            let currentJobDiv = null;
            //循环读取流式数据
            while (true) {
                //读取下一个数据块
                const { done, value } = await reader.read();
                //如果服务器的数据已经全部读完了，则退出循环
                if (done) break;
                //解码数据为文本
                const chunk = decoder.decode(value)
                //按行分割数据
                const lines = chunk.split('\n')
                //遍历每一行的数据
                for (const line of lines) {
                    //如果此行的数据以data: 开头
                    if (line.startsWith('data: ')) {
                        //把data: 后面的数据转为JSON
                        const data = JSON.parse(line.slice(6))
                        //处理开始分析 的消息
                        if (data.type == 'start') {
                            //设置当前的职位ID
                            currentJobId = data.job_id;
                            //为每个职位的分析结果动态创建一个DIV
                            currentJobDiv = document.createElement('div')
                            //为每个放分析结果的DIV初始化内容
                            currentJobDiv.innerHTML = `
                              <h3>${data.job_name}</h3>
                              <p>${data.company}</p>
                              <div id="analysis-${currentJobId}"></div>
                            `
                            //把新的职位的ID添加结果容器中
                            analyze_result.appendChild(currentJobDiv)
                            jobMap[currentJobId] = ''
                        } else if (data.type == 'content') {
                            //累加该职位的分析结果内容
                            jobMap[currentJobId] += data.content;
                            //把最新的职位的分析结果内容转成markdown的 html字符串并显示上此职位的分析结果DIV中
                            document.getElementById(`analysis-${currentJobId}`).innerHTML = marked.parse(jobMap[currentJobId])
                            scrollToBottom()
                        } else if (data.type == 'end') {
                            analyze_result.appendChild(document.createElement('hr'))
                        } else if (data.type == 'error') {
                            document.getElementById(`analysis-${currentJobId}`).innerHTML = `<div style="color:red">分析失败:${data.error}</div>`
                        }
                    }
                }
            }
        }
    </script>
</body>
</html>